<template>
  <div class="environment-info container-bottom-20">
        <CardBox title="设备情况"></CardBox>
        <div class="content-container content-container-height-262">
          <div class="equipment-layout">
            <!-- 左侧大数据 -->
            <div class="equipment-main">
              <div class="equipment-chart" ref="equipmentChart"></div>
              <div class="equipment-footer">
                <div class="equipment-title">
                  <span>{{equipment[type]}}：</span>
                  <span class="fonts-DIN">{{equipmentData.offline+equipmentData.normal+equipmentData.abnormal}}台</span>
                </div>
                <div class="equipment-time fonts-DIN">更新时间：{{updateTime}}</div>
              </div>
            </div>
            <!-- 右侧小数据 -->
            <div class="equipment-grid">
              <div class="equipment-item">
                <div class="item-content" v-for="item in equipmentData.status" :key="item.id">
                  <div v-if="item.type == 'normal'" class="status-dot status-dot-normal"></div>
                  <div v-if="item.type == 'offline'" class="status-dot status-dot-offline"></div>
                  <div v-if="item.type == 'abnormal'" class="status-dot status-dot-abnormal"></div>
                  <div class="equipment-value" >{{ item.type == 'normal' ? '正常' : item.type == 'offline'? '离线' : '异常'}}</div>
                  <div class="equipment-label fonts-DIN">{{ item.value }}</div>
                  <img v-if="item.type == 'normal'" src="@/assets/img/equipment-normal.png" alt="">
                  <img v-if="item.type == 'offline'" src="@/assets/img/equipment-offline.png" alt="">
                  <img v-if="item.type == 'abnormal'" src="@/assets/img/equipment-abnormal.png" alt="">
                </div>
              </div>
              <div class="equipment-total">
                <div class="item-content">
                  <div class="equipment-value fs-14">今日观测量</div>
                  <div class="equipment-label">
                    <span class="fs-16 fonts-DIN">{{equipmentData.today.classify}}</span>
                    <span class="fs-12">种</span>
                  </div>  
                  <div class="equipment-label">
                    <span class="fs-16 fonts-DIN">{{equipmentData.today.value}}</span>
                    <span class="fs-12">条</span>
                  </div>
                </div>
                <div class="item-content">
                  <div class="equipment-value fs-14">总计观测量</div>
                  <div class="equipment-label">
                    <span class="fs-16 fonts-DIN">{{equipmentData.total.classify}}</span>
                    <span class="fs-12">种</span>
                  </div>
                  <div class="equipment-label">
                    <span class="fs-16 fonts-DIN">{{equipmentData.total.value}}</span>
                    <span class="fs-12">条</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>            
</template>

<script>
import * as echarts from 'echarts'
import CardBox from '@/components/Global/CardBox.vue'
import {EventBus} from "../../utils/event-bus";
let that;
export default {
  components: {
    CardBox
  },
  data() {
    return {
      updateTime:'',
      type:'hongwai',
      timer:null,
      equipment:{
        hongwai:"红外设备",
        shengwen:"声纹设备",
        shipin:"视频设备",
        chongqing:"虫情设备",
      },
      equipmentData: {
        today: {},
        total: {},
        status: []
      },
      equipmentChart: null
    }
  },
  created() {
    that=this;
    // EventBus.$on('set-device-type', (message) => {
    //   this.type=message;
    //   // this.getData();
    //   setTimeout(() => {
    //     this.getData();
    //   }, 100);
    // })
  },
  watch: {
    '$route.query': {
      handler(newQuery, oldQuery) {
        // 当路由的query参数发生变化时，执行这里的代码
        console.log('New query:', newQuery);
        console.log('Old query:', oldQuery);
        this.type=newQuery.deviceType;
        this.getData();
      },
      deep: true, // 设置为true以深度观察对象内部的变化
      immediate: true // 组件创建时立即执行一次
    }
  },
  mounted() {
    this.type=this.$route.query.deviceType;
    this.timer=setInterval(function () {
      that.getData();
    }, 60000);
  },
  methods: {
    getData(){
      const currentDate = new Date();
      const year = currentDate.getFullYear();
      const month = currentDate.getMonth() + 1; // 月份从0开始，需要加1
      const day = currentDate.getDate();
      const hours = String(currentDate.getHours()).padStart(2, '0');
      const minutes = String(currentDate.getMinutes()).padStart(2, '0');
      const seconds = String(currentDate.getSeconds()).padStart(2, '0');
      this.updateTime=`${year}-${month}-${day} ${
              hours}:${
              minutes}:${
              seconds}`;
      this.$api.species.getDeviceStatus(this.type).then(res => {
        this.equipmentData = res;
        setTimeout(() => {
          this.initEquipmentChart();
        }, 500);
      });
    },
    initEquipmentChart() {
      if (!this.$refs.equipmentChart) {
        return;
      }
      const total=this.equipmentData.normal+this.equipmentData.abnormal+this.equipmentData.offline;
      const gaugeData = [
        {
          value: Math.floor(100*this.equipmentData.normal/total),
          name: '正常',
          lineStyle: {
            color: '#19DCFF'
          },
          itemStyle: {
            color: '#19DCFF'
          },
          title: {
            offsetCenter: ['0%', '-30%']
          },
          detail: {
            valueAnimation: true,
            offsetCenter: ['0%', '-20%']
          }
        },
        {
          value: Math.floor(this.equipmentData.abnormal*100/total),
          name: '异常',
          lineStyle: {
            color: '#FF4545'
          },
          itemStyle: {
            color: '#FF4545'
          },
          title: {
            offsetCenter: ['0%', '0%']
          },
          detail: {
            valueAnimation: true,
            offsetCenter: ['0%', '10%']
          }
        },
        {
          value: Math.floor(this.equipmentData.offline*100/total),
          name: '离线',
          lineStyle: {
            color: '#F7BF2C'
          },
          itemStyle: {
            color: '#F7BF2C'
          },
          title: {
            offsetCenter: ['0%', '30%']
          },
          detail: {
            valueAnimation: true,
            offsetCenter: ['0%', '40%']
          }
        }
      ];
      const chart = echarts.init(this.$refs.equipmentChart);
      const option = {
        backgroundColor: 'transparent',
        series: [
          {
            type: 'gauge',
            startAngle: 90,
            endAngle: -270,
            pointer: {
              show: false
            },
            progress: {
              show: true,
              overlap: false,
              roundCap: true,
              clip: false,
              itemStyle: {
                show: false,
                // borderWidth: 1,
                // borderColor: '#007EFF'//#464646'
              }
            },
            axisLine: {
              lineStyle: {
                color: [[1, 'rgba(0,150,255,0.1)']],
                width: 20
              }
            },
            splitLine: {
              show: false,
              distance: 0,
              length: 10
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false,
              distance: 30
            },
            data: gaugeData,
            title: {
              show: false,
              fontSize: 8
            },
            detail: {
              width: 30,
              height: 5,
              fontSize: 10,
              color: 'inherit',
              borderColor: 'inherit',
              borderRadius: 15,
              borderWidth: 0,
              formatter: '{value}%'
            }
          }
        ]
      };
      chart.setOption(option);
      this.equipmentChart = chart;
    }
  },
  beforeDestroy() {
    if (this.timer !== null) {
      clearInterval(this.timer);
      this.timer = null; // 确保定时器引用被清除，防止内存泄漏
    }
  }
}
</script>

<style scoped lang="scss">
.equipment-layout {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  color:#fff;
  height: 222px;
  .equipment-main{
    width: 40%;
    position: relative;
    .equipment-chart {
      width: 150px;
      height: 150px;
      margin:0 auto;
    }
    .equipment-chart-content {
        position: absolute;
        top: 36%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        text-align: center;
        width: 100%;
        .equipment-value {
          font-size: 28px;
          color: #fff;
        }
        .equipment-level {
          font-size: 16px;
          color: rgba(255, 255, 255, 0.8);
          margin-top: 5px;
        }
      }
      .equipment-footer {
        width: 100%;
        text-align: center;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.8);
        .equipment-title {
          font-size: 14px;
          color: rgba(255, 255, 255);
          margin-bottom: 5px;
          margin-top: 15px;
        }
      }
  }
  .equipment-grid{
    width: 60%;
    .status-dot{  
      width: 16px;
      height: 8px;
      display: inline-block;
    }
    .status-dot-normal{
      background: #19DCFF;
    }
    .status-dot-offline{
      background: #F7BF2C;
    }
    .status-dot-abnormal{
      background: #FF4545;
    }
  }
  .equipment-item{
    display: flex;
    align-items: center;
    justify-content: center;
    .item-content{
      flex: 1;
    }
  }
  .equipment-total{
    margin-top: 10px;
    padding:12px 13px;
    background: linear-gradient(to right, rgba(0, 71, 102, 0.6), rgba(23, 219, 254, 0.5),rgba(23, 219, 254, 0.1));
    border-top: 3px solid;
    border-bottom: 3px solid;
    border-image: linear-gradient(to right, rgba(23, 219, 254, 1),rgba(23, 219, 254, 0.6),rgba(23, 219, 254, 0)) 1;
    .item-content{
      display: flex;
      align-items: center;
      justify-content: center;
      color:#fff;
      .equipment-label{
        color: #07FFE5;
      }
      div{
        flex: 1;
      }
    }
    .item-content:nth-child(1){
      margin-bottom: 10px;
    }
  }
}
</style>

